<template>
  <view class="comment-box" @longpress.stop="longpressBack(props.item)" @click.stop="userInfoBack({...item, commentLevel:2})">
    <view class="user-comment">
      <img v-if="props.item.faceUrl" :class="isSecond ? 'user-img-s': 'user-img-b'" :src="$countImgUrl(props.item.faceUrl)" @click="gotoUserCenter" />
      <view class="context u-line-1">
        <view class="u-name u-line-1">
          <view class="u-line-1" style="max-width:440rpx;padding-right: 12rpx">
            {{props.item.areviewerName}}
          </view>
          <text class="tag-span" v-if="props.item.areviewerIsAuthor">作者</text>
        </view>
        <view class="word">
          <template v-if="props.item.commentLevel >= 2">
            <text>回复 </text>
            <text style="color:#999999">
              <!-- @click="userInfoBack({id:props.item.breviewerId, name:props.item.breviewerName, commentLevel:2, parentId:item.id})" -->
              {{props.item.breviewerName}}&nbsp;
            </text>
          </template>
          <text>
            {{props.item.comment}}
          </text>
        </view>
        <view>
          <text>{{props.item.commentDate}}</text>
          <text style="margin: 0 12rpx;color:#999999;">回复</text>
        </view>
        <view>
          <slot></slot>
        </view>
      </view>
      <view class="right" v-if="!isSecond">
        <view @click.stop="commentLike">
          <img src="https://img.qumoyugo.com/webimgbg/pic_pamper_like_icon_1.png" v-if="item.isLike" class="heart-img filled-img">
          <img src="https://img.qumoyugo.com/webimgbg/pic_pamper_like_icon.png" v-else class="heart-img kong-img">
          <view style="text-align:center" v-if="props.item.totalLikes">{{props.item.totalLikes}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { getCurrentInstance } from 'vue'
import { useStore } from '@/store'
const { $countImgUrl } = getCurrentInstance().appContext.config.globalProperties
const store = useStore()
const props = defineProps({
  item: {
    type: Object,
    default: () => {}
  },
  isSecond: {
    type: Boolean,
    default: false
  },
  areviewerId: {
    type: Number,
    default: 0
  }
})
const emit = defineEmits(['like', 'infoback', 'longpressback'])

const commentLike = () => {
  emit('like', props.item.id)
}
const userInfoBack = (info) => {
  emit('infoback', info)
}
const longpressBack = (info) => {
  emit('longpressback', info)
}
const gotoUserCenter = () => {
  if (props.item.areviewerId === store.state?.profile?.attr.customerId) {
    uni.navigateTo({
      url: '/user/center'
    })
  } else {
    uni.navigateTo({
      url: '/user/center?id=' + props.item.areviewerId
    })
  }
}
</script>

<style scoped lang="scss">
.comment-box{
  margin-top: 20rpx;
  font-size: 24rpx;
  color: #999999;
  .num {
    font-size: 28rpx;
    color: #666666;
    margin-bottom: 10rpx;
  }
  .user-comment{
    display: flex;
    justify-content: space-between;
    margin-top: 32rpx;
  }
  .context{
    flex: 1;
    padding-left: 24rpx;
  }
  .u-name{
    font-size: 28rpx;
    display: flex;
    line-height: 28rpx;
    .tag-span{
      display: inline-block;
      width: 68rpx;
      height: 32rpx;
      background: #EE751E;
      border-radius: 16rpx;
      color: #fff;
      line-height: 30rpx;
      text-align: center;
      font-size: 20rpx;
    }
  }
  .word{
    word-break: break-word;
    white-space: pre-wrap;
    color: #333333;
    font-size: 28rpx;
    line-height: 40rpx;
    margin: 12rpx 0;
  }
  .user-img-b{
    width: 68rpx;
    height: 68rpx;
    border-radius: 50%;
  }
  .user-img-s{
    width: 48rpx;
    height: 48rpx;
    border-radius: 50%;
  }
  .right{
    width: 100rpx;
    display: flex;
    justify-content: flex-end;
    color: #999;
    align-self: start;
  }
  .heart-img{
    width: 30rpx;
    height: 30rpx;
    margin-right: 6rpx;
  }
}
</style>
